<template>
  <!-- 商品分组 -->
  <view class="diy-goodsGroup" :style="{ background: itemStyle.background, padding: `${itemStyle.paddingY}px ${itemStyle.paddingX}px` }">
    <view class="tabs"
      :style="{ '--tab-active-font-color': itemStyle.tabActiveFontColor, '--tab-active-bg-color': itemStyle.tabActiveBgColor, background: itemStyle.background }">
      <view class="tab-item" v-for="(tabItem, dataIdx) in params.tabs" :key="dataIdx" :class="{ active: dataIdx == tabIndex }"
        @click="handleTabItem(dataIdx)">
        <view class="tab-name" :style="{ color: itemStyle.tabTextColor }">{{ tabItem.name }}</view>
        <view class="sub-name">{{ tabItem.subName }}</view>
      </view>
    </view>
    <view class="goods-list">
      <view class="goods-item" v-for="(dataItm, dataIdx) in dataList[tabIndex]" :key="dataIdx" :class="[`display-${itemStyle.cardType}`]"
        :style="{ marginBottom: `${itemStyle.itemMargin}px`, borderRadius: `${itemStyle.borderRadius}px` }"
        @click="handleGoodsItem(dataItm.goods_id)">
        <view class="goods-image">
          <image class="image" :src="dataItm.goods_image"></image>
        </view>
        <view class="goods-info">
          <view v-if="inArray('goodsName', itemStyle.show)" class="goods-name"
            :class="[ itemStyle.goodsNameRows == 'two' ? 'twoline-hide' : 'oneline-hide', `row-${itemStyle.goodsNameRows}` ]">
            {{ dataItm.goods_name }}
          </view>
          <view v-if="inArray('sellingPoint', itemStyle.show)" class="goods-selling">
            <text class="selling oneline-hide" :style="{ color: itemStyle.sellingColor }">{{ dataItm.selling_point }}</text>
          </view>
          <view v-if="inArray('goodsSales', itemStyle.show)" class="goods-sales oneline-hide">
            <text class="sales">已售{{ dataItm.goods_sales }}</text>
            <!-- <text class="line">|</text>
                      <text>惊艳度100%</text>-->
          </view>
          <view class="footer">
            <view class="goods-price oneline-hide" :style="{ color: itemStyle.priceColor }">
              <template v-if="inArray('goodsPrice', itemStyle.show)">
                <text class="unit">￥</text>
                <text class="value">{{ dataItm.goods_price_min }}</text>
                <!-- <text class="unit2">到手价</text> -->
              </template>
              <text v-if="inArray('linePrice', itemStyle.show)" class="line-price">
                <text class="unit">￥</text>
                <text class="value">{{ dataItm.line_price_min }}</text>
              </text>
            </view>
            <view v-show="inArray('cartBtn', itemStyle.show)" class="action">
              <view class="btn-cart" :style="{ color: itemStyle.btnCartColor }" @click.stop="handleAddCart(dataItm)">
                <text class="cart-icon iconfont" :class="[`icon-jiagou${itemStyle.btnCartStyle}`]"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 加入购物车组件 -->
    <AddCartPopup ref="AddCartPopup" @addCart="onAddCart" />
  </view>
</template>

<script>
  import { inArray } from '@/utils/util'
  import { setCartTabBadge } from '@/core/app'
  import AddCartPopup from '@/components/add-cart-popup'

  export default {
    components: {
      AddCartPopup
    },
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },
    data() {
      return {
        inArray,
        // tab指针
        tabIndex: 0,
      }
    },
    methods: {

      // 切换选项卡
      handleTabItem(index) {
        this.tabIndex = index
      },

      // 跳转商品详情页
      handleGoodsItem(goodsId) {
        if (goodsId !== undefined) {
          this.$navTo(`pages/goods/detail`, { goodsId })
        }
      },

      // 点击加入购物车
      handleAddCart(item) {
        this.$refs.AddCartPopup.handle(item)
      },

      // 更新购物车角标
      onAddCart(total) {
        setCartTabBadge()
      }

    }

  }
</script>

<style lang="scss" scoped>
  // 商品分组
  .diy-goodsGroup {
    // 解决 margin-bottom: -10px 导致的容器异常
    // display: flex;
    // flex-direction: column;
    overflow: hidden;

    .tabs {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 16rpx;
      // height: 106rpx;

      .tab-item {
        position: relative;
        color: #000;
        padding-bottom: 10rpx;

        &.active {
          .sub-name {
            background-color: var(--tab-active-bg-color);
            color: var(--tab-active-font-color);
          }
        }

        .tab-name {
          font-size: 28rpx;
          margin-bottom: 4rpx;
          text-align: center;
        }

        .sub-name {
          font-size: 22rpx;
          padding: 2rpx 10rpx;
          border-radius: 16rpx;
          color: #000;
          text-align: center;
        }

      }
    }

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -20rpx !important;
    }

    .goods-item {
      flex: 0 1 48.6%;
      margin-right: 2.8%;
      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 20rpx;

      &.display-card {
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.07);
      }

      &:nth-child(2n) {
        margin-right: 0 !important;
      }

      .goods-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;

        &:after {
          content: '';
          display: block;
          margin-top: 100%;
        }

        .image {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .goods-info {
        padding: 20rpx;
      }

      .goods-name {
        font-size: 27rpx;
        color: #000;
        margin-bottom: 8rpx;
        // line-height: 1.3; // 用户端

        &.row-two {
          // min-height: 68rpx; // 用户端
        }
      }

      .goods-selling {
        display: flex; // 解决文字超出无法隐藏
        font-size: 24rpx;
        margin-bottom: 8rpx;
        min-height: 38rpx;
      }

      .goods-sales {
        font-size: 24rpx;
        color: #959595;
        margin-bottom: 8rpx;

        .line {
          margin: 0 8rpx;
        }
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .goods-price {
          position: relative;
          color: #ff1051;

          .unit {
            font-size: 20rpx;
          }

          .value {
            font-size: 30rpx;
          }

          .unit2 {
            margin-left: 4rpx;
            font-size: 22rpx;
          }

          .line-price {
            margin-left: 6rpx;
            color: #959595;

            .unit {
              text-decoration: line-through;
              font-size: 22rpx;
            }

            .value {
              text-decoration: line-through;
              font-size: 22rpx;
            }
          }

        }

        .action {

          .btn-cart {
            text-align: center;

            .cart-icon {
              font-size: 36rpx;
            }
          }

        }

      }

    }

  }
</style>